<template>
    <div class="popular-list">
        <div class="popular-list-top">
            <div class="list-top-img">
                <n-image
                    width="120"
                    :src="coverImg"
                />
            </div>
            <div class="list-top-info">
                <div class="list-name">{{ name }}</div>
                <div class="info-icon">
                    <n-icon size="30" @click="setStateAudioList">
                        <img :src="InfoIcon.play" alt="" title="播放">
                    </n-icon>
                    <n-icon size="30">
                        <img :src="InfoIcon.collect" alt="" title="收藏">
                    </n-icon>
                </div>
            </div>
        </div>
        <div class="song-list-item" v-for="(item, index) in tracks.slice(0, 10)" :key="index"
             :style="{background: displayBackground(index + 1)}">
            <div class="item-index" :style="{color: displayTextColor(index + 1)}">
                {{ index + 1 }}
            </div>
            <div class="item-name" @click="setStateAudio(index)">
                {{ item.name }}
            </div>
        </div>
    </div>
</template>

<script>
import {NImage, NIcon} from 'naive-ui';
import {onMounted, reactive, toRefs} from "vue";
import {getPlayListDetail} from "@/network/song/song-list";
import {useStore} from "vuex";
import {getSingleMusicList, getSingleMusicPlay} from "@/util/music";
export default {
    name: "MostPopularRecommendedItem",
    props: {
        playlistName: String,
        playlistId: Number,
        playlistCoverImg: String
    },
    components: {
        NImage,
        NIcon
    },
    setup(props) {
        const store = useStore();
        const playlist = reactive({
            name: props.playlistName,
            id: props.playlistId,
            coverImg: props.playlistCoverImg,
            tracks: []
        })
        // 播放和收藏按钮的地址
        let InfoIcon = {
            play: require("@/assets/image/recommend/IosPlay.svg"),
            collect: require("@/assets/image/recommend/IosAddCircleOutline.svg")
        }
        // 显示加载遮罩
        const beLoading = () => {
            store.commit('setLoading', true);
        }
        // song-list 背景显示
        const displayBackground = (index) => {
            if (index % 2 != 0) {
                return '#e8e8e8';
            } else {
                return '#f4f4f4';
            }
        }
        // song-list排序文字颜色显示判断
        const displayTextColor = (index) => {
            if (index <= 3) {
                return '#c10d0c';
            } else {
                return '#000000';
            }
        }
        
        const setStateAudio = (index) => {
            getSingleMusicPlay(playlist.tracks[index].id);
            beLoading();
        }
        
        const setStateAudioList = () => {
            getSingleMusicList(playlist.tracks.slice(0, 10));
            beLoading();
        }
        onMounted(() => {
            getPlayListDetail(playlist.id).then(res => {
                playlist.tracks = res.data.playlist.tracks;
            })
        })
        return {
            InfoIcon,
            displayBackground,
            displayTextColor,
            ...toRefs(playlist),
            setStateAudio,
            getSingleMusicList,
            setStateAudioList
        }
    }
}
</script>

<style scoped lang="scss">
.popular-list {
    @apply border border-gray-200;
    background: #f4f4f4;
    
    .popular-list-top {
        @apply flex m-4;
        .list-top-info {
            
            @apply mx-4 my-auto;
            .list-name {
                @apply font-bold text-xl transform -translate-y-1/2;
            }
            
            .info-icon {
                @apply flex;
                img {
                    @apply mx-1 cursor-pointer;
                }
            }
        }
    }
    
    .song-list-item {
        @apply flex ml-4;
        .item-index {
            @apply font-medium text-xl py-2;
        }
        
        .item-name {
            @apply mx-4 my-auto hover:underline cursor-pointer;
        }
    }
}
</style>